<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-layout-content
          :style="{ margin: '24px 16px 0', overflow: 'initial' }"
        >
          <div
            :style="{
              padding: '24px',
              background: '#fff',
              textAlign: 'center',
            }"
          >
            <a-card title="概览">
              <a-card-grid style="width: 33.33%; textalign: 'center'">
                <p>文章数</p>
                <p class="font">{{ overviewdata.articlenum }}</p>
              </a-card-grid>
              <!-- <a-card-grid style="width:20%;textAlign:'center'">
                <p>视频数</p>
                <p class="font">{{overviewdata.videonum}}</p>
              </a-card-grid>
              <a-card-grid style="width:20%;textAlign:'center'">
                <p>产品数</p>
                <p class="font">{{overviewdata.productnum}}</p>
              </a-card-grid> -->
              <a-card-grid style="width: 33.33%; textalign: 'center'">
                <p>广告数</p>
                <p class="font">{{ overviewdata.adsnum }}</p>
              </a-card-grid>
              <a-card-grid style="width: 33.33%; textalign: 'center'">
                <p>留言数</p>
                <p class="font">{{ overviewdata.messagenum }}</p>
              </a-card-grid>
            </a-card>
          </div>
        </a-layout-content>
        <f-footer></f-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
export default {
  metaInfo: {
    title: "首页",
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-footer": footer,
  },
  data() {
    return {
      overviewdata: "",
    };
  },
  mounted() {
    this.tokenverify();
    this.setsiders();
  },
  methods: {
    //验证凭证
    tokenverify: async function () {
      var result = await this.$parent.tokenverify();
      console.log(result);
      if (result) {
        this.getoverview();
      }
    },

    //获取概览数据
    getoverview: function () {
      const url = "/Admin/Setting/getoverview";
      const paramObj = {
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.overviewdata = res.data;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "1");
    },
  },
};
</script>
<style scoped>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.font {
  font-size: 26px;
  font-weight: 600;
}
</style>